<template>
  <div class="app">
    <Header @submit="add"/>
    <div class="list" v-show="list.length > 0">
      <h3>留言</h3>
      <Message
        v-for="item in list"
        :key="item.id"
        :info="item"
        @del="del"
      />
    </div>
  </div>
</template>

<script>
import Header from './components/Header.vue'
import Message from './components/Message.vue'
export default {
  data() {
    return {
      list:JSON.parse(localStorage.getItem('list')) || []
    }
  },
  methods:{
    add(info) {
      console.log(info)
      this.list.unshift({
        ...info,
        id:Date.now(),
        time:new Date().toLocaleString()
      })
    },
    del(id) {
      console.log('删除',id )
      // this.list = this.list.filter(v => v.id !==id)
      const index = this.list.findIndex(v => v.id === id)
      this.list.splice(index , 1)
    }
  },
  components:{
    Header,
    Message
  },
  watch:{
    list() {
        localStorage.setItem('list' , JSON.stringify(this.list))
    }
  }
}
</script>

<style lang="scss">

body{
  background: #a8ab8f;
  font-size: 14px;
  padding: 20px 0;
}
.app{
  width: 500px;
  min-height: 500px;
  background: #FFFFFF;
  border-radius: 5px;
  margin: 0 auto;
  padding: 15px;
}
</style>
